<template>
  <div class="wrap">
    <div class="moudle-title">{{title}}</div>
    <div class="content-list">
      <div class="content-item" v-for="(item,index) in noticeData" :key="index" :style="{color:item.type==1?'yellow':item.type===2?'blue':'red'}">
        <div class="notice-n" >
          <img :src="item.type==1?getAssetsImages('u769'):item.type==2?getAssetsImages('blue'):getAssetsImages('red')" style="margin-right:5px">
          <span class="notice-name">{{item.name}}</span>
        </div>
        <div>
          <span class="notice-name">{{item.name}}</span>
          <img :src="item.type==1?getAssetsImages('u45'):item.type==2?getAssetsImages('u53'):getAssetsImages('u88')" style="margin-left:5px">
        </div>
      </div>
    </div>
  </div>
</template>
    
<script>
import { reactive, ref, toRefs } from 'vue'


export default {
  name: 'rightTop',
  props:['title'],
  setup() {
    const multipleTable = ref(null)
    //   const router = useRouter()
    const state = reactive({
      timeInter: null,
      time: '',
      noticeData: [
        {
          name: '关于xxx的信息公告',
          time: '2022-03-33 11:32',
          type:1

        },
        {
          name: '关于xxx的信息公告',
          time: '2022-03-33 11:32',
          type: 2

        },
        {
          name: '关于xxx的信息公告',
          time: '2022-03-33 11:32',
          type: 3
        },
      ]
    })

    // 动态获取图片
    const getAssetsImages = (name) => {
      return new URL(`../../../assets/images/${name}.svg`, import.meta.url).href
    }
    //   const handleAdd = () => {
    //     router.push({ path: '/add' })
    //   }
    //   const handleEdit = (id) => {
    //     router.push({ path: '/add', query: { id } })
    //   }

    return {
      ...toRefs(state),
      multipleTable,
      getAssetsImages
    }
  },

}
</script>
    
<style scoped lang='scss'>
.wrap {
  padding: 10px 0 0 0;
}

.moudle-title {
  color: #50e9ff;
  font-size: 16px;
  text-align: center;
}

.content-list {
  padding: 0 30px;
  color: #147dcf;
  font-size: 14px;
  margin-top: 20px;

  .content-item {
    display: flex;
    margin-top: 5px;
    justify-content: space-between;
  }
}
</style>